<template>
    <s-layout :tabbarshow="false" navbar="normal" :autoBack="true" leftIconColor="#ffffff">

        <view class="max_box">
            <!-- 头部背景盒子 -->
            <view class="background" :style="{backgroundImage:backgroundImage[indexes]}">
                <!-- 搜索框 -->
                <view class="search_box">
                    <s-search-keyword :placeholder="'搜索感兴趣的岗位'" @searchKeyWord="searchKeyWord"></s-search-keyword>
                </view>
            </view>

            <!-- 列表头部盒子 && tabs -->
            <!-- <view class="area list_top" v-if="type == '全部职位'">
                <u-tabs :lineHeight="5" :list="tabs" :lineBgSize="'cover'" @click="tabsItem" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" :lineColor="`url(${baseUrl}/uploads/uniapp_image/user/user_user_slidingblock.png) 100% 100%`"></u-tabs>
                <view class="screen">
                    筛选
                    <u-icon class="icon" name="arrow-down-fill" color="#0038F7" size="10" bold="true"></u-icon>
                </view>
            </view> -->

            <!-- :style="{ height: type == '全部职位' ? '60vh' : '68vh' }" -->
            <scroll-view 
            scroll-y class="area" @scrolltolower="PopupScrolltolower" show-scrollbar="true"
                :refresher-enabled="isOpenRefresh" :refresher-triggered="triggered" :refresher-threshold="100"
                refresher-background="white" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
                @refresherrestore="onRestore" @refresherabort="onAbort" @scroll="onScroll" :style="{ height:'68vh'}" 
            >
                <!-- 列表项 -->
                <view v-if="inviteList.length !== 0">
                    <view class="list_item" v-for="item of inviteList" :key="item">
                        <!-- 列表项头部 -->
                        <view class="item_top" @tap="skipDetails(item.id,item.is_apply)">
                            <view class="title">
                                <image :src="`${baseUrl}/uploads/uniapp_image/user/Direct_admission_title.png`" mode="scaleToFill"/>
                                <view class="item_title">
                                {{ item.title }}
                                </view>
                            </view>
                            <view><u-icon name="arrow-right" color="#6c6f70" size="10" space="8"></u-icon></view>
                        </view>
                        <!-- 薪资 && 距离 -->
                        <view class="salary_box">
                            <!-- 薪资 -->
                            <view class="salary">{{ item.salary_start }}~{{ item.salary_end }}元</view>
                            <!-- 距离   虚位以待 -->
                            <!-- <view class="distance">道外区·大于30km</view> -->
                        </view>
                        <!-- 结算方式 -->
                        <view class="clearing_form">
                            <view class="Each_way" v-for="(v,k) of item.benefits" :key="k">{{ v }}</view>
                        </view>
                        <!-- 列表项底部 -->
                        <view class="item_bottom">
                            <!-- 头像 -->
                            <view class="head">
                            <image :src="`${baseUrl}`+item.company.avatar" mode="scaleToFill"/>
                            <!-- 公司 -->
                            <view class="company">
                                <view class="company_name">{{ item.company.title }}</view>
                                <view class="company_content">{{ item.address }}</view>
                            </view>
                            </view>
                            <!-- 结算按钮 -->
                            <view class="signup_button">
                            <button :class="item.is_apply == 0 ? 'sign_up' : 'Grey_out'" @tap="signUp(item)">{{ item.is_apply == 0 ? '报名' : '已报名' }}</button>
                            </view>
                        </view>
                    </view>
                    <!-- 正在加载组件 -->
                    <view >
                        <s-loadmore-gather :current_page="current_page" :last_page="last_page" ref="loadmoreRef"></s-loadmore-gather>
                    </view>
                </view>
                <!-- 缺醒图 -->
                <view v-else style="width: 100%;height: 500rpx;background-color: #ffffff;border-radius: 20rpx;">
                    <u-empty mode="list"  icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
                    <view class="placeholde"></view>
                </view>
            </scroll-view>
        </view>
        <!-- 封装的底部弹出组件 && 此处使用的是确认报名 -->
        <s-sign-up :showPopup="showPopup" :item_data="item_data" :listitemID="list_item_id" @leftNetWork="leftNetWork" @rightNetWork="rightNetWork"></s-sign-up>
    </s-layout>
</template>

<script setup>
    import { onLaunch, onLoad, onShow } from "@dcloudio/uni-app";
    import { ref, reactive } from "vue";
    import { baseUrl } from "@/sheep/config";
    import sheep from '@/sheep';
    import $share from '@/sheep/platform/share';

    // 做安全区域样式适配
    const { safeAreaInsets } = uni.getSystemInfoSync();
    const type = ref('')
    const indexes = ref(0)
    onLoad((option) => {
        type.value = option.title
        switch (option.title) {
            case '月结':
                indexes.value = 1
                break;
            case '全部职位':
                indexes.value = 0
                break;
        };
        getRecruitmentData()
    })

    onShow(() => {

    })

    const backgroundImage = ref([
        `url(${baseUrl}/uploads/uniapp_image/user/bg_quanbugangwei@3x.png`,
        `url(${baseUrl}/uploads/uniapp_image/user/bg_gongchangzhizhao.png`
    ])

    // 跳转详情页
    const skipDetails = (id,is_apply) => {
        sheep.$router.go('/subpackage/user/index/recruit_details',{
            ids:id,
            is_apply
        })
    }

    // 搜索感兴趣的职位
    const job_title = ref('')
    const searchKeyWord  = (e) => {
        job_title.value = e
        page.value = 1
        inviteList.value = []
        getRecruitmentData()
    }

    // 加载更多
    const loadmoreRef = ref()
    // 分页
    const PopupScrolltolower = () => {
        if(total.value <= 20) {
            return;
        }
        loadmoreRef.value.PopupScrolltolower() // 加载更多
        if (current_page.value < last_page.value) {
            page.value += 1;
        } else {
            return;
        }
        getRecruitmentData()
    }

    // 封装招聘列表接口
    const inviteList = ref([])
    const current_page = ref()  // 当前页
    const last_page = ref()     // 最后页
    const total = ref()         // 总条数
    const page = ref(1)
    const getRecruitmentData = async () => {
        let params = {
        filter: JSON.stringify({
            title:job_title.value
        }),
        op: JSON.stringify({
            title:'LIKE'
        }),
        page:page.value
        }
        const res = await sheep.$api.recruit.getRecruitmentList(params)
        inviteList.value = [...inviteList.value,...res?.data.rows]
        current_page.value = res.data.current_page
        last_page.value = res.data.last_page
        total.value = res.data.total
    }

    const listdetailsData = ref({})
    // 封装招聘详情接口
    const getListDetailData = async (id) => {
        let params = {
        ids:id
        }
        const res = await sheep.$api.recruit.getListDetail(params)
        listdetailsData.value = res.data
    }

    // 报名
    const showPopup = ref(false)
    // 弹出
    const list_item_id = ref()
    const item_data = ref()
    const signUp = (item) => {
        if(item.is_apply !== 1) {
            item_data.value = item
            list_item_id.value = item.id
            showPopup.value = true
        } else {
            return
        }
    }
    // 我在想想
    const leftNetWork = () => {
        showPopup.value = false
    }
    // 组件报名按钮
    const rightNetWork = async (id) => {
        let data = {
        recruitment_id:id
        }
        const res = await sheep.$api.recruitment.postbmRecruitmentApply(data)
        if(res.code == 1) {
            leftNetWork() // 调用关闭弹窗组件方法
            page.value = 1
            inviteList.value = []
            getRecruitmentData()
        }
        
        
    }
    // 页面下拉刷新
const freshing = ref(false)
const triggered = ref(false)
const isOpenRefresh = ref(true)  // 是否开启下拉
// 自定义下拉刷新控件被下拉
const onPulling = (e) => {
    if (e.detail.deltaY < 0) return  // 防止上滑页面也触发下拉
    triggered.value = true;
}
// 自定义下拉刷新被触发
const onRefresh = () => {
    if (freshing.value) return;
    freshing.value = true;
    setTimeout(() => {
        triggered.value = false;
        freshing.value = false;
        inviteList.value = []
        page.value = 1
        getRecruitmentData()
    }, 500);
}
// 自定义下拉刷新被复位
const onRestore = () => {
    triggered.value = 'restore'; // 需要重置
    // console.log("onRestore");
}
// 自定义下拉刷新被中止
const onAbort = () => {
    // console.log("onAbort");
}
</script>

<style scoped lang="scss">
    page {
        width: 100%;
        height: 100%;
    }
    // 版心
    .area {
        width: calc(100% - 40rpx);
        margin: 0 20rpx;
    }
    // 头部盒子
    .background {
        height: 460rpx;
        width: 100%;
        background-size: cover; /* 或 contain */
        position: relative;
        margin-bottom: 10rpx;
    }

    // 搜索框
    .search_box {
        position: absolute;
        bottom: 0;
        width: calc(100% - 20rpx);
        padding: 10rpx 10rpx;
    }

    .list_top {
    display: flex;
    height: 110rpx;
    align-items: center;
    background-color: #ffffff;
    border-bottom: 2rpx solid #f4f4f4;
    margin-bottom: 20rpx;
    border-radius: 16rpx;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
    // 筛选
    .screen {
        display: flex;
        width: 80rpx;
        height: 56rpx;
        border-radius: 16rpx;
        border: 3rpx solid $uni-color-primary;
        text-align: center;
        line-height: 56rpx;
        font-family: PingFangSC;
        color: $uni-color-primary;
        font-weight: $uni-font-weight;
        font-size: $uni-font-size-sm;
        font-style: normal;
        text-decoration: none;
        margin-left: auto; /* 右侧盒子靠右对齐 */
        margin-right: 10rpx;
        padding-left: 20rpx;
            .icon {
                margin-left: 10rpx;
            }
        }
    }

    // 列表项
    .list_item {
        width: calc(100% - 40rpx);
        border-radius: 16rpx;
        background-color: #ffffff;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
        padding: 30rpx 20rpx 38rpx 20rpx;
        margin-bottom: 20rpx;
        // 列表项头部
        .item_top {
        height: 44rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
            display: flex;
            align-items: center;
        }
        image {
            width: 48rpx;
            height: 32rpx;
            margin-top: 5rpx;
        }
        .item_title {
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: $uni-font-size-big;
            font-style: normal;
            text-decoration: none;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-left: 5rpx;
        }
        }
        // 薪资 && 距离
        .salary_box {
        margin-top: 20rpx;
        height: 42rpx;
        display: flex;
        justify-content: space-between; /* 左右对齐 */
        line-height: 42rpx;
        padding: 0 30rpx 0 10rpx;
        // 薪资
        .salary {
            font-family: PingFangSC;
            color: #ff6600;
            font-weight: $uni-font-weight;
            font-size: 30rpx;
            font-style: normal;
            text-decoration: none;
            text-align: center;
        }
        // 距离
        .distance {
            font-family: PingFangSC;
            color: #888888;
            font-weight: 400;
           font-size:$uni-font-size-26;
            font-style: normal;
            text-decoration: none;
            text-align: right;
        }
        }
        // 结算方式
        .clearing_form {
        height: 48rpx;
        display: flex;
        margin-top: 20rpx;
        // 每一种结算方式
        .Each_way {
            height: 100%;
            padding: 0 10rpx;
            border-radius: 4rpx;
            background-color: #f9f9f9;
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: 400;
           font-size:$uni-font-size-26;
            font-style: normal;
            text-decoration: none;
            text-align: left;
            text-align: center;
            line-height: 48rpx;
            margin: 0 10rpx;
        }
        }
        // 列表项底部
        .item_bottom {
        display: flex;
        height: 64rpx;
        margin-top: 20rpx;
        padding-left: 10rpx;
        justify-content: space-between;
        // 头像
        .head {
            height: 64rpx;
            display: flex;
            image {
            width: 64rpx;
            height: 64rpx;
            }
            // 公司
            .company {
            height: 100%;
            margin-left: 20rpx;
            .company_name {
                font-family: PingFangSC;
                color: $uni-text-color;
                font-weight: 500;
               font-size:$uni-font-size-26;
                font-style: normal;
                text-decoration: none;
                text-align: left;
            }
            .company_content {
                font-family: PingFangSC;
                color: #999999;
                font-weight: 400;
                font-size: 20rpx;
                font-style: normal;
                text-decoration: none;
                width: 50vw;
                white-space: nowrap; /* 不换行 */
                overflow: hidden; /* 超出部分隐藏 */
                text-overflow: ellipsis; /* 超出部分显示省略号 */
            }
            }
        }

        // 结算按钮
        .signup_button {
            padding-right: 10rpx;
            .sign_up {
            width: 150rpx;
            height: 60rpx;
            border-radius: 32rpx;
            background: linear-gradient(
                90deg,
                rgba(0, 56, 247, 1) 0%,
                rgba(77, 139, 255, 1) 100%
            );
            font-family: PingFangSC;
            color: #ffffff;
            font-weight: 500;
            font-size: 30rpx;
            font-style: normal;
            text-decoration: none;
            text-align: left;
            line-height: 60rpx;
            text-align: center;
            }
            // 置灰
            .Grey_out {
                width: 150rpx;
                height: 60rpx;
                border-radius: 32rpx;
                background: linear-gradient( 90deg, rgba(152, 156, 158, 1) 0%, rgba(120, 124, 125, 1) 100%);
                font-family: PingFangSC;
                color: #ffffff;
                font-weight: 500;
                font-size: 30rpx;
                font-style: normal;
                text-decoration: none;
                text-align: left;
                line-height: 60rpx;
                text-align: center;
            }
        }
        }
    }

    // 占位盒子
    .placeholder {
        height: 10rpx;
    }

</style>

